<template>
  <footer>
    <div class="footer-title">
      <img alt="" src="@/assets/images/record-icon.png">
      <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52062702000145" rel="noreferrer"
        target="_blank">贵公网安备52062702000145</a>
      <a href="https://beian.miit.gov.cn/" target="_blank">黔ICP备2024027311号-1</a>
    </div>
  </footer>
</template>

<script lang="ts" setup>
import { onMounted, ref, Ref } from "vue";
import { getPoetry, getWeather } from "@/api/request";
import { AxiosResponse } from 'axios';

interface MingJuData {
  title: string;
  chaodai: string;
  zuozhe: string;
  chuzi: string;
  url: string;
}

// 创建一个 ref 对象并指定泛型为 MingJuData 类型
const mingJuData: Ref<MingJuData | null> = ref(null);
// 创建响应式对象
const links = [
  { text: 'CodePen', url: 'https://codepen.io/' },
  { text: 'MDN', url: 'https://developer.mozilla.org/zh-CN/' },
  { text: 'ChatGPT', url: 'https://chatgpt.com/' },
  { text: '缘觉影视', url: 'https://www.yjys.me/' },
  { text: 'Sketchfab', url: 'https://sketchfab.com/' },
  { text: 'Pinia', url: 'https://pinia.web3doc.top/' },
  { text: 'VUE', url: 'https://cn.vuejs.org/' },
  { text: 'Element Plus', url: 'https://element-plus.gitee.io/zh-CN/' },
  { text: '框架语法对比', url: 'https://component-party.lainbo.com/' }
]
const contacts = [
  { icon: 'icon-weixin', text: 'Break_LoveFor' },
  { icon: 'icon-youxiang', text: 'lil5201@outlook.com' },
  { icon: 'icon-dianhua', text: '17585857492' },
  { icon: 'icon-qq', text: '2309241494' }
]
const handleClickAuthor = (url: string) => {
  window.open(url, '_blank')
}
onMounted(async () => {
  // 假设 getPoetry 返回的是一个 AxiosPromise
  getPoetry().then((response: AxiosResponse<MingJuData>) => {
    // 在这里你可以访问 response.data 来获取响应的数据
    mingJuData.value = response.data;
  })
  getWeather().then(res => {
  })
})
</script>
<style lang="scss" scoped>
.footer-title {
  width: 100%;
  text-align: center;
  height: 90px;
  line-height: 70px;
  color: #B8B8D3;
  font-size: 12px;
  background: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  border-radius: 12px;

  img {
    width: 15px;
    height: 15px;
    margin-right: 5px;
    margin-bottom: 4px;
  }

  a:last-child {
    margin-left: 20px;
  }
}
</style>
